{{define "content"}}
<!-- Hero Section -->
<div class="row mb-4">
    <div class="col">
        <div class="hero-section text-center py-4">
            <div class="hero-content">
                <h1 class="display-5 fw-bold mb-3">🏆 Main Leaderboard</h1>
                <p class="lead mb-4">Top developers ranked by completed challenges</p>
                
                <div class="d-flex justify-content-center flex-wrap gap-2 mb-3">
                    <button id="refresh-leaderboard" class="btn btn-light px-4">
                        <i class="bi bi-arrow-clockwise me-2"></i>Refresh Leaderboard
                    </button>
                    <a href="/" class="btn btn-outline-light px-4">
                        <i class="bi bi-code-slash me-2"></i>Browse Challenges
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading State -->
<div id="loading-state" class="text-center py-5">
    <div class="spinner-border text-primary mb-3" role="status">
        <span class="visually-hidden">Loading leaderboard...</span>
    </div>
    <p class="text-muted">Loading leaderboard data...</p>
</div>

<!-- Leaderboard Content -->
<div id="leaderboard-content" style="display: none;">
    <!-- Top 3 Podium -->
    <div class="row mb-5" id="podium-section" style="display: none;">
        <div class="col">
            <h3 class="text-center mb-4">🥇 Top Champions</h3>
            <div class="row justify-content-center">
                <!-- Top 3 will be populated by JavaScript -->
            </div>
        </div>
    </div>

    <!-- Full Leaderboard -->
<div class="row">
        <div class="col">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-trophy me-2"></i>Complete Rankings
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="leaderboard-table">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width: 80px;">Rank</th>
                                    <th style="width: 200px;">Developer</th>
                                    <th class="text-center" style="width: 120px;">Solved</th>
                                    <th class="text-center" style="width: 120px;">Rate</th>
                                    <th class="text-center" style="width: 150px;">Achievement</th>
                                    <th>Challenge Progress</th>
                                </tr>
                            </thead>
                            <tbody id="leaderboard-tbody">
                                <!-- Leaderboard rows will be populated by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Challenge Legend -->
<div class="row mt-4" id="legend-section" style="display: none;">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">
                    <i class="bi bi-info-circle me-2"></i>Challenge Progress Legend
                </h6>
                <div class="row">
                    <div class="col-md-6">
                        <small class="text-muted d-flex align-items-center mb-2">
                            <span class="badge bg-success me-2">✓</span>
                            Completed (All tests passed)
                        </small>
                    </div>
                    <div class="col-md-6">
                        <small class="text-muted d-flex align-items-center mb-2">
                            <span class="badge bg-light text-dark me-2">•</span>
                            Not attempted or incomplete
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
    margin-bottom: 2rem;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>') repeat;
    background-size: 40px 40px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.podium-card {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.podium-card.first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.podium-card.second {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3);
}

.podium-card.third {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    box-shadow: 0 8px 25px rgba(205, 127, 50, 0.3);
}

.podium-rank {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.podium-rank.first {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.podium-rank.second {
    background: linear-gradient(135deg, #4ecdc4, #45b7aa);
}

.podium-rank.third {
    background: linear-gradient(135deg, #feca57, #ff6348);
}

.challenge-indicator {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin: 1px;
    text-align: center;
    line-height: 22px;
    font-size: 0.7rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.challenge-indicator.completed {
    background: #28a745;
    color: white;
}

.challenge-indicator.not-completed {
    background: #e9ecef;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.challenge-indicator:hover {
    transform: scale(1.1);
    z-index: 10;
    position: relative;
}

.rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
}

.rank-badge.top-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
}

.rank-badge.top-3 {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #333;
}

.rank-badge.top-10 {
    background: linear-gradient(135deg, #cd7f32, #daa520);
}

.rank-badge.other {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.achievement-badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    font-weight: 500;
}

.sponsor-badge-line {
    background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
    display: inline-block;
    margin: 2px 0;
    animation: sponsorGlow 2s ease-in-out infinite alternate;
}

@keyframes sponsorGlow {
    0% { box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3); }
    100% { box-shadow: 0 2px 6px rgba(255, 107, 107, 0.5); }
}

.sponsor-heart-podium {
    font-size: 1.1em;
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.6));
    animation: sponsorPulse 2s ease-in-out infinite;
}

@keyframes sponsorPulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(255, 107, 107, 0.5));
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.8));
    }
}
</style>
{{end}}

{{define "scripts"}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loadingState = document.getElementById('loading-state');
    const leaderboardContent = document.getElementById('leaderboard-content');
    const podiumSection = document.getElementById('podium-section');
    const legendSection = document.getElementById('legend-section');
    const leaderboardTbody = document.getElementById('leaderboard-tbody');
    const refreshButton = document.getElementById('refresh-leaderboard');

    // Load leaderboard data
    async function loadLeaderboard() {
        try {
            loadingState.style.display = 'block';
            leaderboardContent.style.display = 'none';

            const response = await fetch('/api/main-leaderboard');
            const data = await response.json();

            if (data.success && data.leaderboard.length > 0) {
                // Pass totalChallenges for dynamic rendering
                renderLeaderboard(data.leaderboard, data.totalChallenges || 0);
                loadingState.style.display = 'none';
                leaderboardContent.style.display = 'block';
                legendSection.style.display = 'block';
            } else {
                showEmptyState();
            }
        } catch (error) {
            console.error('Error loading leaderboard:', error);
            showErrorState();
        }
    }

    function renderLeaderboard(leaderboard, totalChallenges) {
        // Show podium for top 3
        if (leaderboard.length >= 3) {
            renderPodium(leaderboard.slice(0, 3));
            podiumSection.style.display = 'block';
        }

        // Render full table
        leaderboardTbody.innerHTML = '';
        leaderboard.forEach(user => {
            const row = createLeaderboardRow(user, totalChallenges);
            leaderboardTbody.appendChild(row);
        });
    }

    function renderPodium(topThree) {
        const podiumContainer = podiumSection.querySelector('.row');
        podiumContainer.innerHTML = '';

        // Reorder for podium visual: 2nd, 1st, 3rd
        const podiumOrder = [topThree[1], topThree[0], topThree[2]].filter(Boolean);
        
        podiumOrder.forEach((user, index) => {
            if (!user) return;
            
            const actualRank = user.rank;
            const podiumClass = actualRank === 1 ? 'first' : actualRank === 2 ? 'second' : 'third';
            const rankClass = actualRank === 1 ? 'first' : actualRank === 2 ? 'second' : 'third';
            
            const podiumCard = document.createElement('div');
            podiumCard.className = `col-md-4 mb-3`;
            podiumCard.innerHTML = `
                <div class="card podium-card ${podiumClass} text-center p-3">
                    <div class="podium-rank ${rankClass}">${actualRank}</div>
                    <img src="https://github.com/${user.username}.png" 
                         class="rounded-circle mx-auto mb-3" 
                         style="width: 80px; height: 80px; border: 3px solid white;">
                    <h5 class="mb-2">
                        ${user.isSponsor ? '<span class="sponsor-heart-podium">❤️</span> ' : ''}${user.username}
                    </h5>
                    <p class="mb-2"><strong>${user.completedCount}</strong> challenges solved</p>
                    <p class="mb-0 small">${user.completionRate.toFixed(1)}% completion rate</p>
                    <div class="mt-2">
                        <span class="badge bg-primary achievement-badge">${user.achievement}</span>
                    </div>
                </div>
            `;
            podiumContainer.appendChild(podiumCard);
        });
    }

    function createLeaderboardRow(user, totalChallenges) {
        const row = document.createElement('tr');
        
        // Rank badge styling
        let rankBadgeClass = 'other';
        if (user.rank === 1) rankBadgeClass = 'top-1';
        else if (user.rank <= 3) rankBadgeClass = 'top-3';
        else if (user.rank <= 10) rankBadgeClass = 'top-10';

        // Generate challenge indicators dynamically based on totalChallenges
        const count = Number.isInteger(totalChallenges) && totalChallenges > 0 ? totalChallenges : Object.keys(user.completedChallenges || {}).length;
        let challengeIndicators = '';
        for (let i = 1; i <= count; i++) {
            const isCompleted = user.completedChallenges[i] === true;
            const indicatorClass = isCompleted ? 'completed' : 'not-completed';
            const content = isCompleted ? '✓' : '•';
            challengeIndicators += `<span class="challenge-indicator ${indicatorClass}" title="Challenge ${i}: ${isCompleted ? 'Completed' : 'Not completed'}">${content}</span>`;
        }

        row.innerHTML = `
            <td class="text-center">
                <div class="rank-badge ${rankBadgeClass}">${user.rank}</div>
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <img src="https://github.com/${user.username}.png" 
                         class="avatar-small me-3" alt="${user.username}">
                    <div>
                        <div class="fw-bold">${user.username}</div>
                        ${user.isSponsor ? '<div class="sponsor-badge-line">❤️ Sponsor</div>' : '<div style="height: 0;"></div>'}
                        <div>
                            <a href="https://github.com/${user.username}" target="_blank" 
                               class="small text-muted text-decoration-none">
                                <i class="bi bi-github"></i> View Profile
                            </a>
                        </div>
                    </div>
                </div>
            </td>
            <td class="text-center">
                <div class="fw-bold text-primary fs-5">${user.completedCount}</div>
                <small class="text-muted">challenges</small>
            </td>
            <td class="text-center">
                <div class="fw-bold text-success">${user.completionRate.toFixed(1)}%</div>
                <small class="text-muted">complete</small>
            </td>
            <td class="text-center">
                <span class="badge bg-primary achievement-badge">${user.achievement}</span>
            </td>
            <td>
                <div style="line-height: 1.2;">
                    ${challengeIndicators}
                </div>
            </td>
        `;

        return row;
    }

    function showEmptyState() {
        loadingState.innerHTML = `
            <div class="text-center py-5">
                <i class="bi bi-trophy" style="font-size: 3rem; color: #6c757d;"></i>
                <h4 class="mt-3 text-muted">No Rankings Yet</h4>
                <p class="text-muted">Be the first to complete a challenge and claim the top spot!</p>
                <a href="/" class="btn btn-primary">Browse Challenges</a>
            </div>
        `;
    }

    function showErrorState() {
        loadingState.innerHTML = `
            <div class="text-center py-5">
                <i class="bi bi-exclamation-triangle" style="font-size: 3rem; color: #dc3545;"></i>
                <h4 class="mt-3 text-danger">Error Loading Leaderboard</h4>
                <p class="text-muted">Failed to load leaderboard data. Please try again.</p>
                <button class="btn btn-primary" onclick="location.reload()">Retry</button>
            </div>
        `;
    }

    // Refresh button handler
    refreshButton.addEventListener('click', loadLeaderboard);

    // Initial load
    loadLeaderboard();
});
</script>
{{end}} 